<template>
    <div class="subpage sgaric-order-detail-container">
        <div class="sgaric-order-detail-box" v-if="orderDetail">
            <div class="project-info">
                <div class="project-info-top">
                    <p class="project-num">订单编号：{{orderDetail.outTradeNo}}</p>
                    <div class="project-item-info">
                        <div class="project-img">
                            <img :src="orderDetail.productSmallPic" alt="">
                        </div>
                        <ul class="project-item-detail">
                            <li>
                                <span class="baoyou">{{orderDetail.productSaleType}}{{orderDetail.productPostage}}</span>
                                <span>{{orderDetail.aidDetail}}</span>
                            </li>
                            <li>
                                <p>{{orderDetail.aidDescript}}</p>
                            </li>
                        </ul>
                    </div>
                    <ul class="project-other-info">
                        <li>等级：{{orderDetail.productLevel}}</li>
                        <li>
                            <span>重量：{{orderDetail.productWeight}}{{orderDetail.productWeightUnit}}</span>
                            <span>最低订货量：{{orderDetail.minOrderQuantity}}{{orderDetail.minOrderQuantityUnit}}</span>
                        </li>
                        <li>
                            <span>规格：{{orderDetail.productSpecs}}</span>
                            <span>包装：{{orderDetail.productPacking}}</span>
                        </li>
                        <li>
                            <span>产地</span>
                            <span>
                                <img src="@/assets/img/delivery_location_icon.png" alt="">
                                {{orderDetail.productOriginProvince}}·{{orderDetail.productOriginCity}}
                            </span>
                        </li>
                    </ul>
                </div>
                <ul class="project-info-bottom">
                    <li>
                        <p class="project-tag-name">单价</p>
                        <p class="project-tag-info project-tag-info-price">
                            <span>{{orderDetail.productSalePrice}}</span>{{orderDetail.productSalePriceUnit}}
                        </p>
                    </li>
                    <li>
                        <p class="project-tag-name">购买数量</p>
                        <p class="project-tag-info">{{orderDetail.orderQuantity}}{{orderDetail.orderQuantityUnit}}</p>
                    </li>
                    <li>
                        <p class="project-tag-name">总金额</p>
                        <p class="project-tag-info color-primary">{{orderDetail.orderMoney}}元</p>
                    </li>
                    <li v-if="(orderDetail.state == 2 || orderDetail.state == 3) && orderDetail.expName">
                        <p class="project-tag-name">配送方式</p>
                        <p class="project-tag-info">{{orderDetail.expName}}</p>
                    </li>
                    <li>
                        <p class="project-tag-name">物流费用</p>
                        <p class="project-tag-info color-primary">{{orderDetail.expressFee}}元</p>
                    </li>
                    <!-- <li>
                        <p class="project-tag-name">配送时间</p>
                        <p class="project-tag-info">下单后三天内</p>
                    </li> -->
                    <li class="project-pay-info">
                        <p class="project-tag-name">实付金额</p>
                        <p class="project-tag-info">
                            合计：<span class="color-primary">{{orderDetail.payMoney}}元</span>
                        </p>
                    </li>
                </ul>
            </div>

            <div class="send-delivery-box">
                <van-collapse v-model="activeNames">
                    <van-collapse-item size="large" title="发货详情" name="1" class="send-goods-box" v-if="(orderDetail.state == 2 || orderDetail.state == 3) && orderDetail.expName">
                        <ul class="send-goods-detail">
                            <li>
                                <span>发货量</span>
                                <span>{{orderDetail.orderQuantity}}{{orderDetail.orderQuantityUnit}}</span>
                            </li>
                            <li>
                                <span>总重量</span>
                                <span>{{orderDetail.orderTotalWeight}}{{orderDetail.orderTotalWeightUnit}}</span>
                            </li>
                            <li>
                                <span>配送方式</span>
                                <span>{{orderDetail.expName}}</span>
                            </li>
                            <li>
                                <span>包装方式</span>
                                <span>{{orderDetail.productPacking}}</span>
                            </li>
                        </ul>
                    </van-collapse-item>

                    <van-collapse-item size="large" title="收货地址" name="2" class="delivery-box">
                        <div class="delivery-address-box">
                            <div class="address-detail">
                                <img src="@/assets/img/delivery_location_icon.png" alt="">
                                <div class="address-detail-text">
                                    <p><span>{{orderDetail.addressName}}</span>{{orderDetail.addressPhone}}</p>
                                    <p>{{orderDetail.addressProvince}} {{orderDetail.addressCounty}} {{orderDetail.addressCity}} {{orderDetail.addressDetail}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="logistics-step" v-if="(orderDetail.state == 2 || orderDetail.state == 3) && expressInfo.Traces.length > 0">
                            <van-steps direction="vertical" :active="0">
                                <van-step v-for="(item, index) in expressInfo.Traces" :key="index">
                                    <h3>{{item.AcceptStation}}</h3>
                                    <p>{{item.AcceptTime}}</p>
                                </van-step>
                            </van-steps>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </div>

            <div class="order-info-detail">
                <div class="order-info-detail-title">订单信息</div>
                <ul class="order-info-detail-list">
                    <li>
                        <span>购买数量</span>
                        <span>{{orderDetail.orderQuantity}}{{orderDetail.orderQuantityUnit}}</span>
                    </li>
                    <li>
                        <span>订单金额</span>
                        <span>{{orderDetail.orderMoney}}元</span>
                    </li>
                    <li>
                        <span>优惠金额</span>
                        <span>{{orderDetail.discountMoney}}元</span>
                    </li>
                    <li>
                        <span>支付金额</span>
                        <span>{{orderDetail.payMoney}}元</span>
                    </li>
                    <li>
                        <span>支付方式</span>
                        <span>{{orderDetail.payMethod}}</span>
                    </li>
                    <li>
                        <span>合同编号</span>
                        <span>{{orderDetail.contractCode}}</span>
                    </li>
                    <li>
                        <span>支付时间</span>
                        <span>{{orderDetail.payTime}}</span>
                    </li>
                    <li>
                        <span>订单编号</span>
                        <span>{{orderDetail.outTradeNo}}</span>
                    </li>
                </ul>
            </div>

            <div class="serve-agreement-box" @click="goServiceAgreement(orderDetail.contractId)">
                <div class="serve-agreement-box-title">
                    <img src="../../../assets/img/contract_icon.png" alt="">
                    <span>友牧农场服务协议</span>
                </div>
                <van-icon name="arrow" class="arrow-right" />
            </div>
        </div>

        <div class="bottom-info" v-if="orderDetail.state == 1">
            <a :href="'tel:' + cusumerTel" class="bottom-info-left">
                <van-icon name="phone-o" class="phone-icon" />
                <span>咨询电话</span>
            </a>
            <!-- <van-button round class="u-btn-default u-bg-gray state-btn" v-if="orderDetail.state == 0">待付款</van-button> -->
            <van-button round class="u-btn-default u-bg-gray state-btn" v-if="orderDetail.state == 1">待发货</van-button>
        </div>

        <div class="bottom-info bottom-info-other" v-else>
            <van-button round class="u-btn-default u-bg-gradient-light" v-if="orderDetail.state == 2" @click="sureFn">确认收货</van-button>
            <van-button round class="u-btn-default u-bg-gray complate-btn" v-if="orderDetail.state == 3">已完成</van-button>
            <van-button round class="u-btn-default u-bg-gray complate-btn" v-if="orderDetail.state == 99">已失效</van-button>
        </div>
    </div>
</template>

<script>
import { Collapse, CollapseItem, Step, Steps } from 'vant';
import Storage from "@/utils/storage";
export default {
    components:{
        [Collapse.name]:Collapse,
        [CollapseItem.name]:CollapseItem,
        [Step.name]:Step,
        [Steps.name]:Steps
    },
    data() {
        return {
            orderDetail: {
                orderProductVo: {
                    smallPic : ''
                },
                orderSellVo: {
                    orderSellVo: 0
                },
                state: 1
            },
            expressInfo: {
                Traces: []
            },
            activeNames: ['1', '2'],
            cusumerTel: '',
        };
    },
    created() {
        if(Storage.get('isOrderEditAddress')){
            Storage.del('isOrderEditAddress')
            location.reload()
        }else{
            this.getOrderDetail()
        }
    },
    methods: {
        getOrderDetail() { //获取数据
            this.$api.get('/api/fungus_order/detail/' + this.$route.query.orderId)
                .then((res) => {
                    // res.data.state = 0
                    if(res.data.payTime) {
                        if(res.data.payTime.indexOf('T') != -1) {
                            res.data.payTime = res.data.payTime.replace('T', ' ')
                        }
                    }else {
                        res.data.payTime = ''
                    }
                    this.orderDetail = res.data;
                    if(res.data.state == 2 || res.data.state == 3){
                       this.getExpressInfo()
                    }
                })
            this.$api.get('/api/index/consumer_tel')
                .then((res) => {
                    this.cusumerTel = res.data.cusumerTel;
                })
        },

        goServiceAgreement(id) { //服务协议
            this.$router.push({
                name: 'agaricPurchaseAgreement',
                query: {
                    id: id ? id : -1,
                    orderQuantityUnit: this.orderDetail.orderQuantityUnit
                }
            })
        },

        getExpressInfo() { //获取物流信息
            this.$api.get('/api/fungus_order/exp/' + this.$route.query.orderId)
                .then((res) => {
                    let infoData = JSON.parse(res.data)
                    if(infoData.Traces.length > 0){
                        infoData.Traces.reverse(); 
                    }
                    this.expressInfo = infoData;
                })
        },

        sureFn() { //确认收货
            console.log('确认收货')
            this.$api.post('/api/fungus_order/confirm_order/' + this.$route.query.orderId)
                .then((res) => {
                    this.$tool.toast('收货成功')
                    setTimeout(() => {
                        this.getOrderDetail()
                    }, 800)
                })
        }
    }
}
</script>

<style>
    .send-delivery-box .van-cell .van-cell__right-icon {
        color: #cdcdcd;
        font-size: 20px;
    }
    .send-delivery-box .van-cell .van-cell:not(:last-child)::after {
        left: 0;
    }
</style>

<style lang="scss" scoped>
    .sgaric-order-detail-container {
        .sgaric-order-detail-box {
            width: 100%;
            height: calc(100% - 63px);
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }
        .project-info {
            width: 100%;
            margin-bottom: 10px;
            .project-info-top {
                width: 100%;
                margin-bottom: 10px;
                padding: 16px;
                box-sizing: border-box;
                background-color: #fff;
                .project-num {
                    margin-bottom: 16px;
                    font-size: 16px;
                    font-weight: 400;
                    color: #344047;
                }
                .project-item-info {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    .project-img {
                        width: 80px;
                        height: 80px;
                        margin-right: 12px;
                        border-radius: 8px;
                        overflow: hidden;
                        background-color: #f8f8f8;
                        img {
                            width: 80px;
                            height: 80px;
                            object-fit: cover;
                        }
                    }
                    .project-item-detail {
                        flex: 1;
                        li {
                            width: 100%;
                            line-height: 22px;
                            margin-bottom: 6px;
                            font-size: 14px;
                            &:nth-child(1) {
                                .baoyou {
                                    position: relative;
                                    top: 1px;
                                    float: left;
                                    display: block;
                                    width: 64px;
                                    height: 18px;
                                    line-height: normal;
                                    margin-right: 8px;
                                    border-radius: 100em;
                                    font-size: 12px;
                                    color: #31BC8D;
                                    background-color: #BCEFE3;
                                    text-align: center;
                                }
                            }
                            p {
                                font-size: 12px;
                                color: #969C9E;
                            }
                        }
                    }
                }
                .project-other-info {
                    margin-top: 20px;
                    li {
                        margin-bottom: 10px;
                        color: #5D6164;
                        &:nth-child(1) {

                        }
                        &:nth-child(2) {
                            span {
                                font-size: 12px;
                                color: #969C9E;
                            }
                            span:first-child {
                                padding-right: 30px;
                            }
                            span:last-child {
                                position: relative;
                                text-align: right;
                                padding-left: 30px;
                            }
                            span:last-child::before {
                                content: "";
                                position: absolute;
                                top: 1px;
                                left: 0;
                                width: 1px;
                                height: 12px;
                                background-color: #D0CFCF;
                            }
                        }
                        &:nth-child(3) {
                            margin-bottom: 20px;
                            span {
                                font-size: 12px;
                                color: #969C9E;
                            }
                            span:first-child {
                                padding-right: 30px;
                            }
                            span:last-child {
                                position: relative;
                                text-align: right;
                                padding-left: 30px;
                            }
                            span:last-child::before {
                                content: "";
                                position: absolute;
                                top: 1px;
                                left: 0;
                                width: 1px;
                                height: 12px;
                                background-color: #D0CFCF;
                            }
                        }
                        &:nth-child(4) {
                            span {
                                &:nth-child(1) {
                                    margin-right: 26px;
                                    color: #344047;
                                }
                                &:nth-child(2) {
                                    img {
                                        position: relative;
                                        top: 3px;
                                        width: 12px;
                                        height: 16px;
                                        margin-right: 6px;
                                    }
                                } 
                            }
                        }
                    }
                }
            }
            .project-info-bottom {
                width: 100%;
                background-color: #fff;
                li {
                    width: 100%;
                    padding: 16px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 1px solid #f2f2f2;
                    color: #5D6164;
                    .project-tag-name {
                        width: 88px;
                    }
                    .project-tag-info {
                        flex: 1;
                    }
                    .project-tag-info-price {
                        font-size: 12px;
                        color: #969C9E;
                        span {
                            position: relative;
                            top: 1px;
                            margin-right: 3px;
                            font-size: 18px;
                            font-weight: 500;
                            color: #F58523;
                        }
                    }
                }
                .project-pay-info {
                    font-size: 16px;
                    color: #344047;
                    border-bottom: none;
                    .project-tag-info {
                        text-align: right;
                    }
                }
            }
        }

        .resale-status-box {
            width: 100%;
            margin-bottom: 10px;
            background-color: #fff;
            .product-info {
                width: 100%;
                padding: 8px 16px;
                box-sizing: border-box;
                background-color: #31BC8D;
                color: #fff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .product-info-left {
                    span:first-child {
                        margin-right: 10px;
                    }
                }
                .product-info-right {
                    display: flex;
                    align-items: center;
                    img {
                        width: 16px;
                        height: 16px;
                        margin-left: 6px;
                    }
                }
            }
            .project-title {
                width: 100%;
                padding: 16px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f2f2f2;
                p {
                    font-size: 16px;
                    font-weight: 500;
                    color: #344047;
                }
            }
            .resal-status-text {
                width: 100%;
                padding: 24px 16px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                span {
                    color: #344047;
                }
            }
        }

        .send-delivery-box {
            width: 100%;
            margin-bottom: 10px;
            .send-goods-box {
                margin-bottom: 10px;
                .send-goods-detail {
                    li {
                        width: 100%;
                        margin-bottom: 10px;
                        display: flex;
                        font-size: 14px;
                        span {
                            color: #5D6164;
                        }
                        span:first-child {
                            display: block;
                            width: 88px;
                        }
                    }
                    li:last-child {
                        margin-bottom: 0;
                    }
                }
                .send-goods-tips {
                    display: flex;
                    align-items: center;
                    color: #F58523;
                    img {
                        width: 16px;
                        height: 16px;
                        margin-left: 8px;
                    }
                }
            }
            .delivery-box {
                position: relative;
                &::before {
                    content: '';
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    height: 1px;
                    background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
                    background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
                    background-size: 115px;
                }
                .delivery-address-box {
                    width: 100%;
                    // padding-bottom: 16px;
                    // box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    .address-detail {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        img {
                            width: 19px;
                            height: 25px;
                            margin-right: 16px;
                        }
                        .address-detail-text {
                            flex: 1;
                            p {
                                color: #5D6164;
                            }
                            p:first-child {
                                margin-bottom: 6px;
                                font-size: 14px;
                                span {
                                    margin-right: 16px;
                                }
                            }
                            p:last-child {
                                font-size: 12px;
                            }
                        }
                    }
                    .delivery-status {
                        width: 130px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        p {
                            flex: 1;
                            text-align: right;
                            font-size: 14px;
                        }
                        .arrow-right {
                            margin-left: 5px;
                        }
                    }
                }
                .logistics-step {
                    padding-top: 10px;
                    border-top: 1px solid #f2f2f2;
                }
            }
        }

        .order-info-detail {
            width: 100%;
            margin-bottom: 10px;
            background-color: #fff;
            .order-info-detail-title {
                width: 100%;
                padding: 16px;
                box-sizing: border-box;
                font-size: 16px;
                font-weight: 500;
                color: #344047;
                border-bottom: 1px solid #f2f2f2;
            }
            .order-info-detail-list {
                width: 100%;
                padding: 6px 16px 16px;
                box-sizing: border-box;
                li {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 10px;
                    span {
                        font-size: 14px;
                        &:first-child {
                            color: #999;
                        }
                        &:last-child {
                            color: #666;
                        }
                    }
                }
            }
        }

        .serve-agreement-box {
            width: 100%;
            margin-bottom: 28px;
            padding: 16px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            .serve-agreement-box-title {
                display: flex;
                align-items: center;
                img {
                    width: 22px;
                    height: 22px;
                    margin-right: 12px;
                }
                span {
                    font-size: 15px;
                    font-weight: 400;
                    color: #333;
                }
            }
        }
    }

    .bottom-info {
        // position: fixed;
        // bottom: 0;
        // left: 0;
        // z-index: 9;
        width: 100%;
        height: 63px;
        padding-right: 16px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        border-top: 1px solid #f2f2f2;
        .bottom-info-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            text-align: center;
            color: #969C9E;
            .phone-icon {
                font-size: 24px;
            }
            span {
                margin-top: 8px;
                font-size: 12px;
            }
        }
        .state-btn {
            width: 230px;
            height: 51px;
            line-height: 51px;
            font-size: 18px;
            box-shadow: none;
        }
    }
    .bottom-info-other {
        width: 100%;
        padding: 4px 16px 0;
        box-sizing: border-box;
        background-color: transparent;
        border-top: none;
        align-items: unset;
        .complate-btn {
            box-shadow: none;
        }
    }
</style>